/*
 * @Author       : ShiJunJie
 * @Date         : 2022-04-12 17:48:25
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-05-09 11:21:55
 * @FilePath     : /config/vite/plugins/components/vite-plugin-theme-preprocessor/index.ts
 * @Descripttion : 一个vite v2.0+插件，让你轻松实现基于less、sass的 web 应用在线动态主题切换。
 */
/**
 * =========================================================================
 * https://github.com/GitOfZGT/vite-plugin-theme-preprocessor/blob/HEAD/README.zh.md
 * ----------------------------------------------------------------------
 * 有动态主题模式和预设主题模式
 * 特点：
 *  使用成本很低
 *  不限 ui 框架，Element-ui、iview、Ant-design 等等等（只要基于 less/sass）
 *  不依赖 css3 vars
 *  浏览器兼容性良好（IE9+ ?，待验证 ，但 vite 构建的产物最低 Polyfill 到 IE11，需更低的，你可以用 webpack 版本的插件@zougt/some-loader-utils，所以兼容性问题取决用的框架）
 * =========================================================================
 */

import { themePreprocessorPlugin, themePreprocessorHmrPlugin, } from "@zougt/vite-plugin-theme-preprocessor";
import path from "path";
import fs from 'fs'

/*这里的color值不是由 变量 编译得来的，这时就会被上面那个 color 覆盖了， 实际上这里的color才是需要的效果*/
const includeStyles = {
  ".ant-picker-input > input:focus": { 'box-shadow': 'none' },
  '.ant-checkbox-disabled .ant-checkbox-inner': {
    'background-color': '#f5f5f5;',
    'border-color': '#d9d9d9 !important;'
  },
  '.ant-btn-dangerous': {
    'color': '#ff4d4f;',
    'border-color': '#ff4d4f;',
    'background': '#fff;'
  },
  '.ant-btn-dangerous:active': {
    'color': '#d9363e;',
    'border-color': '#d9363e;',
    'background': '#fff;'
  },
  '.ant-btn-dangerous:hover, .ant-btn-dangerous:focus': {
    'color': '#ff7875;',
    'border-color': '#ff7875;',
    'background': '#fff;'
  },
  '.ant-select-item-option-disabled': {
    'color': 'rgba(0, 0, 0, 0.25);',
    'cursor': 'not-allowed;'
  },
  '.ant-picker-cell-in-view': {
    'color': 'rgba(0, 0, 0, 0.85);'
  }
};

export default (options?: viteUserOptions): viteUserPlugins => {
  const plugins = [// 创建动态主题切换
    themePreprocessorPlugin({
      less: {
        defaultScopeName: "theme-green", // 默认取 multipleScopeVars[0].scopeName
        // 启用任意主题色模式
        // arbitraryMode: true,
        // 默认的主题色，用于对其他颜色值形成对比值，通常与 src/theme/theme-vars.less 中的一个主题色相同，也可以不相同，就看是不是你想要的效果
        // defaultPrimaryColor: "#512da7",
        // 只需提供一组变量文件，变量文件内容不应该夹带样式代码，设定上只需存在变量
        multipleScopeVars: [
          {
            scopeName: "theme-green",
            path: path.resolve("src/assets/style/theme/theme-green.less"),
            includeStyles,
          },
          {
            // 必需
            scopeName: "theme-default",
            // path 和 varsContent 必选一个
            path: path.resolve("src/assets/style/theme/theme-default.less"),
            // varsContent参数等效于 path文件的内容 ，可以让 defaultPrimaryColor 与 "@primary-color"值只写一遍， varsContent 与 path 选一个使用
            // varsContent:`@primary-color:${defaultPrimaryColor};`
            includeStyles,
          },
        ],
        extract: false,// 在生产模式是否抽取独立的主题css文件
        // css中不是由主题色变量生成的颜色，也让它抽取到主题css内，可以提高权重
        includeStyleWithColors: [
          {
            // color也可以是array，如 ["#ffffff","#000"]
            color: ['#ffffff', 'rgba(0, 0, 0, 0.25)'],
            // 排除属性，如 不提取背景色的#ffffff
            excludeCssProps: ["background", "background-color"],
            // 排除选择器，如 不提取以下选择器的 #ffffff 
            excludeSelectors: [
              ".ant-btn",
              ".ant-btn-dangerous:hover, .ant-btn-dangerous:focus",
              ".ant-btn-dangerous:active",
              ".ant-btn-dangerous.ant-btn-link:active",
              ".ant-btn-dangerous.ant-btn-link:hover, .ant-btn-dangerous.ant-btn-link:focus",
            ],
          },
          { color: "transparent", },
        ],
      },
      // scss:{

      // },
    }), themePreprocessorHmrPlugin()]

  return { plugins }
}
